<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<link href="css/style_zhuce.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
	@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
	}  
	@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
	}  
	body {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
	}  
</style>
</head>
<body
	style="background-color: #1c77ac; background-image: url(images/light.png); background-repeat: no-repeat; background-position: center top; overflow: hidden;">
	<h1>注册页面</h1>

	<h1>欢迎您的注册</h1>
	<div class="main-agileits">
		<div class="form-w3-agile">
			<h2 class="sub-agileits-w3layouts">注册</h2>
			<form action="zhuce" method="post" enctype="multipart/form-data" onsubmit="return notNull()">
				<span style="color: red">${error }</span>
				<input type="text" name="username" placeholder="新的用户" id='username'  required="required" onKeyUp="value=value.replace(/[\W]/g,'')" maxlength='16'/>
				<input type="password" name="password" placeholder="新的密码" id='password' required="required"/>
				<input type="file" name="photo" style="display: none" id="photo" required="required">
				<div id="path"></div>
				<input type="button" class="loginbtn" name="photo" id="selectBtn" value="上传头像"  required="required">
				<div class="submit-w3l">
					<input type="submit" value="注册" >
				</div>
			</form>
		</div>
	</div>

	<div class="copyright w3-agile">
		<p>
			© 2018
		</p>
	</div>






	<script type="text/javascript">
	
	function notNull(){
		 var username = $('username').value;
		 var password = $('password').value;
		var exp=/^[ ]+$/;
		var exp1=/^[ ]/;
		if(exp.test(username)||exp1.test(username)||exp1.test(password)||exp.test(password)){
			alert("注册信息有误");
			return false;
		}else{
			return true;
		} 
		
	}
	
	var xhr;//用于接收XMLHttpRequest
	//获取一个XMLHttpRequest
	function getXHR(){
		if(window.XMLHttpRequest){
			//绝大多数浏览器获取XMLHttpRequest方法
			xhr = new XMLHttpRequest();
		}else{
			//IE5  IE6的获取方法
			xhr = new ActiveXObjext("microsoft.XMLHTTP");
		}
	}
	
	
	
	
	
	
	
	
	
	
		//给选择文件按钮绑定单击事件
		$("selectBtn").addEventListener("click", function() {
			//调用文件控件的单击事件
			$("photo").click();
		});
		//内容改变事件
		$("photo").addEventListener("change", function() {
			var dir = this.value;
			dir = dir.substring(dir.lastIndexOf("\\") + 1);
			$("path").innerHTML = "已选择文件" + dir;
		});

		function $(id) {
			return document.getElementById(id);
		}
		
	</script>
</body>
</html>
